<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>layuiAdmin 控制台主页一</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiAdmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiAdmin/style/admin.css" media="all">
</head>

<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            设备总数
          </div>
          <div class="layui-card-body layuiadmin-card-list">

            <p class="layuiadmin-big-font devCount">16</p>
            <p>
              设备位置
              <span class="layuiadmin-span-color regCount"><span>9</span> <i class="layui-inline layui-icon layui-icon-user"></i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            访问量
            <span class="layui-badge layui-bg-blue layuiadmin-badge">月</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font weekCount">9,999,666</p>
            <p>
              总计访问量
              <span class="layuiadmin-span-color"><span class="allCount">88万</span> <i class="layui-inline layui-icon layui-icon-user"></i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            办件量
            <span class="layui-badge layui-bg-cyan layuiadmin-badge">月</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font bWeekCount">33,555</p>
            <p>
              总计办件量
              <span class="layuiadmin-span-color"><span class="bCount">100</span> <i class="layui-inline layui-icon layui-icon-user"></i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            查询量
            <span class="layui-badge layui-bg-green layuiadmin-badge">月</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">

            <p class="layuiadmin-big-font sWeekCount">999,666</p>
            <p>
              总计查询量
              <span class="layuiadmin-span-color"><span class="sCount"></span> <i class="layui-inline layui-icon layui-icon-user"></i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm12">
        <div class="layui-card">
          <div class="layui-card-header">
            访问量
            <div class="layui-btn-group layuiadmin-btn-group">
              <!-- <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">去年</a>
              <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">今年</a> -->
            </div>
          </div>
          <div class="layui-card-body">
            <div class="layui-row">
              <div class="layui-col-sm8">
                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagetwo">
                  <div carousel-item id="LAY-index-pagetwo">
                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                  </div>
                </div>
              </div>
              <div class="layui-col-sm4">
                <div class="layuiadmin-card-list">
                  <p class="layuiadmin-normal-font">周访问数</p>
                  <span>办件量</span>
                  <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                    <div class="layui-progress-bar bprg" lay-percent="30%"></div>
                  </div>
                </div>
                <div class="layuiadmin-card-list">
                  <p class="layuiadmin-normal-font">周访问数</p>
                  <span>查询量</span>
                  <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                    <div class="layui-progress-bar sprg" lay-percent="20%"></div>
                  </div>
                </div>
                <div class="layuiadmin-card-list">
                  <p class="layuiadmin-normal-font">周活跃用户</p>
                  <span>活跃用户</span>
                  <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                    <div class="layui-progress-bar pprg" lay-percent="25%"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">地区分布</div>
          <div class="layui-card-body">
            <div class="layui-row layui-col-space15">
              <table class="layui-table layuiadmin-page-table" lay-skin="line">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>地区</th>
                    <th>总访问量</th>
                    <th>办件量</th>
                    <th>查询量</th>
                  </tr>
                </thead>
                <tbody id="alltable">
                  <tr>
                    <td>1</td>
                    <td>樊城区</td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>老河口市</td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>南漳县</td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>宜城市</td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    document.write("<script type='text/javascript' src='../../layuiAdmin/xin.js?v=" + new Date().getTime() + "'><\/script>");
  </script>
  <script src="../../layuiAdmin/layui/layui.js"></script>
  <script>
    layui.config({
      base: '../../layuiAdmin/', //静态资源所在路径
      version: myCommon.version
    }).extend({
      index: 'lib/index' //主入口模块
    }).use(['index', 'admin'], function () {

      var $ = layui.$,
        admin = layui.admin
      var adata = {};
      admin.req({
        type: 'get',
        async: false,
        url: '/api/home/GetHomeReport',
        success: function (r) {
          if(r.code == 200) {
            $(".allCount").html(r.data.allCount);
            $(".weekCount").html(r.data.weekCount);
            $(".bCount").html(r.data.bCount);
            $(".bWeekCount").html(r.data.bWeekCount);
            $(".devCount").html(r.data.devCount);
            $(".regCount").html(r.data.regCount);
            $(".sCount").html(r.data.sCount);
            $(".sWeekCount").html(r.data.sWeekCount);
            $(".weekCount").html(r.data.weekCount);

            $(".bprg").attr('lay-percent', r.data.bprg);
            $(".sprg").attr('lay-percent', r.data.sprg);
            $(".pprg").attr('lay-percent', r.data.pprg);

            var html = [];
            layui.each(r.data.alltable, function (index, item) {
              html.push('<tr><td>' + (index + 1) + '</td>');
              html.push('<td>' + item.cRegionName + '</td>');
              html.push('<td>' + item.allCount + '</td>');
              html.push('<td>' + (item.bj == null ? 0 : item.bj) + '</td>');
              html.push('<td>' + item.cj + '</td></tr>');
            });
            $("#alltable").html(html.join(''));
            adata = r.data;
          }
        }
      })
      //区块轮播切换
      layui.use(['admin', 'carousel'], function () {
        var $ = layui.$,
          admin = layui.admin,
          carousel = layui.carousel,
          element = layui.element,
          device = layui.device();

        //轮播切换
        $('.layadmin-carousel').each(function () {
          var othis = $(this);
          carousel.render({
            elem: this,
            width: '100%',
            arrow: 'none',
            interval: othis.data('interval'),
            autoplay: othis.data('autoplay') === true,
            trigger: (device.ios || device.android) ? 'click' : 'hover',
            anim: othis.data('anim')
          });
        });
        element.render('progress');
      });

      //访问量
      layui.use(['carousel', 'echarts'], function () {
        var $ = layui.$,
          carousel = layui.carousel,
          echarts = layui.echarts;

        var echartsApp = [],
          options = [
          {
            tooltip: {
              trigger: 'axis'
            },
            calculable: true,
            legend: {
              data: ['访问量', '查询量', '办件量']
            },
            xAxis: [
            {
              type: 'category',
              data: adata.diagram.col
            }],
            yAxis: [
            {
              type: 'value',
              name: '访问量',
              axisLabel: {
                formatter: '{value} 次'
              }
            },
            {
              type: 'value',
              name: '查询量',
              axisLabel: {
                formatter: '{value} 次'
              }
            }],
            series: [
            {
              name: '访问量',
              type: 'line',
              data: adata.diagram.yacount
            },
            {
              name: '查询量',
              type: 'line',
              data: adata.diagram.ybcount
            },
            {
              name: '办件量',
              type: 'line',
              data: adata.diagram.yscount
            }]
          }],
          elemDataView = $('#LAY-index-pagetwo').children('div'),
          renderDataView = function (index) {
            echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
            echartsApp[index].setOption(options[index]);
            window.onresize = echartsApp[index].resize;
          };



        //没找到DOM，终止执行
        if(!elemDataView[0]) return;
        renderDataView(0);

      });
    });
  </script>
</body>

</html>